<template>
    <div class="application">
        <el-dialog
                :visible.sync="centerDialogVisible"
                width="90%"
                center>
            <router-view />
        </el-dialog>
        <div class="inner w">
            <div class="title">
                <span>开发者申请</span>
                <i>- 以下内容全部为必填</i>
            </div>
            <div class="container">
                <div class="h80" style="line-height: normal;margin: 30px 0 10px 0;">
                    <span class="pub-leftTitle" style="line-height: normal">联系人：</span>
                    <input type="text" v-model="lianxiren" name="" value=""/>
                </div>
                <div class="h80">
                    <span class="pub-leftTitle">手机：</span>
                    <span v-show="phoneShow" ref="changePhone" class="phone">{{phone}}</span>
                    <span v-show="xiugai" @click="changePhone" class="xiugai">[修改]</span>
                    <input  v-show="wxPhoneShow" style="width: 200px;margin-right: 14px;" v-model="yanzhengma1.Tel" type="text"  placeholder="请输入手机号" name="" value=""/>
                    <button v-show="yanzhengma1.show" @click="huoquyanzhengma('yanzhengma1')" class="yzm">
                        {{yanzhengma1.text}}
                    </button>
                    <button v-show="!yanzhengma1.show" class="yzm">{{yanzhengma1.count+'s'}}</button>
                    <input class="inputyzm" placeholder="验证码" v-model="yanzhengma1.oneYzm" type="text" name="" value=""/>
                    <!--<span class="success">验证成功!</span>-->
                </div>
                <div class="h80" style="padding-bottom: 15px;margin-top: -8px;">
                    <span class="pub-leftTitle">公司名称：</span>
                    <input class="gongsiInput" type="text" v-model="gongsiming" placeholder="公司名称与营业执照一致" name="" value=""/>
                </div>
                <div class="yingyezhizhao">
                    <span class="pub-leftTitle yy">营业执照：</span>
                    <el-upload style="margin-left: 5px;" class="avatar-uploader" action="/qmx/filemanage/upload" name="cauditupload" :data="{'type':'cauditupload'}" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <!--城市-->
                <div class="linkage">
                    <span class="pub-leftTitle yy">通讯地址：</span>
                    <el-select v-model="sheng" @change="choseProvince" placeholder="省份">
                        <el-option v-for="(value,key) in province" :key="key" :label="value.value" :value="key">
                        </el-option>
                    </el-select>
                    <el-select v-model="shi" @change="choseCity" placeholder="地级市">
                        <el-option v-for="item in shi1" :key="item.id" :label="item.value" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="qu" @change="choseBlock" placeholder="市、县级市">
                        <el-option v-for="item in qu1" :key="item.id" :label="item.value" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div class="h80" style="line-height: normal;margin-top: -8px;">
                    <span class="pub-leftTitle"></span>
                    <input class="gongsiInput" type="text" v-model="dizhi" placeholder="详细地址" name="" value=""/>
                </div>
                <!--公司邮箱-->
                <div class="email">
                    <span class="pub-leftTitle">公司邮箱：</span>
                    <input class="inputEmail" v-model="gcEmail" type="text" name="" value=""/>
                </div>
                <!--邮箱验证-->
                <div class="emailYZ" style="margin-top: -20px;">
                    <span class="pub-leftTitle">邮箱验证：</span>
                    <input class="inputyzm" v-model="gcEmailYzm" placeholder="验证码" type="text" name="" value=""/>
                    <button v-show="yanzhengma2.show" @click="huoquyanzhengmaEmail('yanzhengma2')" class="yzm">
                        {{yanzhengma2.text}}
                    </button>
                    <button v-show="!yanzhengma2.show" class="yzm">{{yanzhengma2.count+'s'}}</button>
                </div>
                <!--剑鱼数据用途-->
                <div class="dataUrl">
                    <span class="pub-leftTitle titleData">剑鱼数据用途：</span>
                    <textarea style="margin-left: 5px;" class="textar" v-model="jyDataUrl" @input="seizeText" name="" rows="" cols=""></textarea>
                    <span class="size"><i>{{jyDataUrl.length}}</i>/<i>2000字</i></span>
                </div>
                <!--说明-->
                <div class="explain">
                    <span class="pub-leftTitle"></span>
                    <p>
                        <i>说明：</i>请详细说明剑鱼数据的使用场景<br/>
                        <el-checkbox v-model="checked">
                            <span class="bottom">已阅读并同意<a href="#" @click="centerDialogVisible = true">《开发者协议》</a></span>
                        </el-checkbox>

                    </p>

                </div>
                <div class="submit">
                    <span class="pub-leftTitle"></span>
                    <button v-if="!submitBtn" class="btn">提交</button>
                    <button v-else @click="submitFrom" class="btn success">提交</button>
                </div>
            </div>
        </div>
        <!--验证滑块-->
        <div @click="closeHk" class="hkInner" v-show="huakuai1.show">
        	<div class="resHK1" @click.stop="">
            	<div id="kfz1">

            	</div>
        	</div>
        </div>
        
    </div>

</template>

<script>
  import jsonMap from '../static/js/map.json'
  import { kaifazhe, apply } from '../api/getData.js'

  require('../static/web/js/jquery.min.js')
  require('../static/web/js/verify.js')
  export default {
    name: 'application',
    data: function () {
      return {
        centerDialogVisible: false, // dialog
        lianxiren: '',
        phone: '', //电话
        gongsiming: '', //公司名
        imageUrl: '', //显示img
        subImageUrl: '',//重新提交上传的图片
        upImg: '',
        gcEmail: '', //公司email
        gcEmailYzm: '', //邮箱验证码
        xiugai: false, //手机登录
        wxPhoneShow: false, //微信登录显示输入框
        phoneShow: true, //手机号显示
        isSubmitHtml: false,
        yanzhengma1: {
          show: true,
          count: '',
          timer: null,
          text: '获取验证码',
          Tel: '',
          token: null,
          oneYzm: '' //用户输入验证码
        },
        yanzhengma2: {
          show: true,
          count: '',
          timer: null,
          text: '获取验证码',
          Tel: '',
          token: null
        },
        huakuai1: {
          show: false,
          success: false
        },
        /*城市联动*/
        province: '',
        sheng: '',
        shi: '',
        qu: '',
        shi1: [],
        qu1: [],
        city: '',
        block: '',
        dizhi: '', //纤细地址
        /*剑鱼数据用途*/
        jyDataUrl: '',
        /*checked*/
        checked: false,

      }
    },
    computed: {
      submitBtn () {
        return !!this.lianxiren && !!this.yanzhengma1.oneYzm && !!this.gongsiming && !!this.sheng && !!this.shi && !!this.qu && !!this.dizhi && !!this.gcEmailYzm && !!this.jyDataUrl && !!this.checked

      }
    },
    created: function () {

    }, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {
      this.$bus.$emit('footShow', false)
      this.getCityData()
      kaifazhe().then((data) => {
        this.isSubmitHtml = data.data.developerInfo
        let info = data.data.developerInfo
        if (info != null) {
          console.log(info)
          this.lianxiren = info.s_linkman
          this.phone = info.s_mobile
          this.yanzhengma1.Tel = info.s_mobile
          this.gongsiming = info.s_enterprisename
          this.imageUrl = info.s_blicense
          this.sheng = info.s_province
          this.shi = info.s_city
          this.qu = info.s_county
          this.dizhi = info.s_address
          this.gcEmail = info.s_email
          this.jyDataUrl = info.s_purpose
          this.upImg = info.s_oldblicense
        }

        if (!data.data.userInfo.type) { //微信

          this.phoneShow = false
          this.wxPhoneShow = true
        } else { //手机号
          this.phone = data.data.userInfo.phone
          this.phoneShow = true
          this.wxPhoneShow = false
        }
        if (this.$route.query.reapply == 'true') {
          // this.$router.push('/application')
        } else {
          if (this.isSubmitHtml == null) {
            this.$router.push('/application')
          } else {
            this.$router.push('/applicationInfo')
          }
        }

      })
      //			let _that = this;
      //			$('#kfz1').slideVerify({
      //				type: 2, //类型
      //				vOffset: 5, //误差量，根据需求自行调整
      //				vSpace: 5, //间隔
      //				imgName: ['1.png', '2.png', '3.png', '4.png', '5.png'],
      //				imgSize: {
      //					width: '400px',
      //					height: '200px',
      //				},
      //				blockSize: {
      //					width: '80px',
      //					height: '80px',
      //				},
      //				barSize: {
      //					width: '400px',
      //					height: '40px',
      //				},
      //				ready: function() {},
      //				success: function(obj) {
      //					if(_that.wxPhoneShow){//微信
      //						_that.huakuai1.success = true;
      //						_that.huakuai1.show = false;
      //						_that.hkSuccess(_that, "yanzhengma1");
      //					}else{//手机
      //						_that.huakuai1.success = true;
      //						_that.huakuai1.show = false;
      //						_that.hkSuccess(_that, "yanzhengma1");
      //					}
      //
      //				},
      //				error: function() {}
      //
      //			});
    }, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
      /*修改电话*/
      changePhone () {
        this.$refs.changePhone.setAttribute('contentEditable', 'true')
        this.$refs.changePhone.focus()
      },
      /*验证手机*/
      LoginIphone (name) {
        let reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
        if (!reg.test(this[name].Tel)) {
          this.$message.error('手机号格式不对')
          return false
        } else {
          return true
        }
      },
      /*获取验证码*/
      huoquyanzhengma (name) {
      	$('#kfz1').html('');
        if (this.wxPhoneShow) { //微信
          this.LoginIphone('yanzhengma1')
          if (this.LoginIphone('yanzhengma1')) {
            this.huakuai1.show = true

          } else {
            this.huakuai1.show = false
          }
        } else { //手机
          this.huakuai1.show = true
        }
        this.slideVerfy(this.slideVerfySuccess)

      },
      slideVerfy (func) {
        $('#kfz1').slideVerify({
          type: 2, //类型
          vOffset: 5, //误差量，根据需求自行调整
          vSpace: 5, //间隔
          imgName: ['1.png', '2.png', '3.png', '4.png', '5.png'],
          imgSize: {
            width: '400px',
            height: '200px',
          },
          blockSize: {
            width: '80px',
            height: '80px',
          },
          barSize: {
            width: '400px',
            height: '40px',
          },
          ready: function () {},
          success: func,
          error: function () {}
        })
      },
      slideVerfySuccess () {

        if (this.wxPhoneShow) { //微信
          this.huakuai1.success = true
          this.huakuai1.show = false
          this.hkSuccess(this, 'yanzhengma1')
        } else { //手机
          this.huakuai1.success = true
          this.huakuai1.show = false
          this.hkSuccess(this, 'yanzhengma1')
        }
        $('#kfz1').html('')

      },
      slideVerfyEmailSuccess () {
        this.huakuai1.show = false
        this.huakuai1.success = true
        this.hk2Success(this, 'yanzhengma2')
        $('#kfz1').html('')
      },
      huoquyanzhengmaEmail () {
      	$('#kfz1').html('');
        this.yzEmail()
        if (this.yzEmail()) {
          this.huakuai1.show = true
          this.slideVerfy(this.slideVerfyEmailSuccess)
        }
		
      },
      /*滑块验证通过之后*/
      hkSuccess ($this, name) {
        $this[name].token = sessionStorage.getItem('regToken')
        if ($this.huakuai1.success) {
          apply({
            'reqType': 'sendIdentCode',
            's_mobile': $this.yanzhengma1.Tel,
            'token': $this.yanzhengma1.token
          }).then((data) => {
            let info = data.data.status
            if (info == 'verfifyError') {
              $this.$message.error('验证没通过！！！')
            } else if (info == 'y') {
              $this.$message({
                message: '验证码已发送，请查看短信',
                type: 'success'
              })
              const TIME_COUNT = 60
              if (!$this[name].timer) {
                $this[name].count = TIME_COUNT
                $this[name].show = false
                $this[name].timer = setInterval(() => {
                  if ($this[name].count > 0 && $this[name].count <= TIME_COUNT) {
                    $this[name].count--
                  } else {
                    $this[name].show = true
                    clearInterval($this[name].timer)
                    $this[name].timer = null
                  }
                }, 1000)
              }
            }
          })

        }
      },
      hk2Success ($this, name) {
        $this[name].token = sessionStorage.getItem('regToken')
        if ($this.huakuai1.success) {
          apply({
            'reqType': 'sendMailCode',
            's_email': $this.gcEmail,
            'token': $this.yanzhengma2.token
          }).then((data) => {
            let info = data.data.status
            if (info == 'verfifyError') {
              $this.$message.error('验证没通过！！！')
            } else if (info == 'y') {
              $this.$message({
                message: '验证码已发送，请查看邮件',
                type: 'success'
              })
              const TIME_COUNT = 60
              if (!$this[name].timer) {
                $this[name].count = TIME_COUNT
                $this[name].show = false
                $this[name].timer = setInterval(() => {
                  if ($this[name].count > 0 && $this[name].count <= TIME_COUNT) {
                    $this[name].count--
                  } else {
                    $this[name].show = true
                    clearInterval($this[name].timer)
                    $this[name].timer = null
                  }
                }, 1000)
              }
            }
          })

        }
      },
      /*验证邮箱*/
      yzEmail () {
        let reg = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/

        if (reg.test(this.gcEmail)) {
          return true
        } else {
          this.$message.error('邮箱格式错误!!!')
          return false
        }
      },
      handleAvatarSuccess (res, file) {
        this.upImg = res.url
        this.imageUrl = URL.createObjectURL(file.raw)
      },
      beforeAvatarUpload (file) {
        const extension = ['jpg','png'].includes(file.name.split('.')[1])
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!extension) {
          this.$message.error('上传图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!')
        }
        return extension && isLt2M
      },
      /*点击空白关闭滑块*/
     closeHk(){
     	this.huakuai1.show = false;
     },
      // 加载china地点数据，三级
      getCityData () {
        /*获取地图数据*/
        let JSONmAP = jsonMap
        this.province = []
        this.city = []
        this.block = []

        // 省市区数据分类
        for (var item in jsonMap) {
          if (item.match(/0000$/)) { //省
            this.province.push({
              id: item,
              value: jsonMap[item],
              children: []
            })
          } else if (item.match(/00$/)) { //市
            this.city.push({
              id: item,
              value: jsonMap[item],
              children: []
            })
          } else { //区
            this.block.push({
              id: item,
              value: jsonMap[item]
            })
          }
        }
        // 分类市级
        for (var index in this.province) {
          for (var index1 in this.city) {
            if (this.province[index].id.slice(0, 2) === this.city[index1].id.slice(0, 2)) {
              this.province[index].children.push(this.city[index1])
            }
          }
        }
        // 分类区级
        for (var item1 in this.city) {
          for (var item2 in this.block) {
            if (this.block[item2].id.slice(0, 4) === this.city[item1].id.slice(0, 4)) {
              this.city[item1].children.push(this.block[item2])
            }
          }
        }
        /* 修改为键值对 */
        let obj = {}
        this.province.forEach(v => {
             let shi = {}
             v.children.forEach(s => {
               let qu = {}
               s.children.forEach(q => {
                 qu[q.id] = q
               })
               s.children =qu
               shi[s.id] = s
             })
             v.children = shi
             obj[v.id] = v
        })
        this.province = obj
      },
      // 选省
      choseProvince (e) {
        this.sheng = e
        console.log('--this.sheng--', this.sheng)
        /* 更改市数据 */
        this.shi1 = this.province[e].children
        /* 默认选中首个 */
        this.choseCity(Object.values(this.shi1)[0].id)
      },
      // 选市
      choseCity (e) {
        this.shi = e
        console.log('--this.shi--', this.shi)
        /* 更改区数据 */
        this.qu1 = this.shi1[e].children
        this.choseBlock(Object.values(this.qu1)[0].id)
      },
      // 选区
      choseBlock (e) {
        this.qu = e
      },
      /*限制textAR字数*/
      seizeText () {
        this.jyDataUrl = this.jyDataUrl.substr(0, 2000)
      },
      submitFrom () {
        apply({
          'reqType': 'save',
          's_linkman': this.lianxiren,
          'identCode': this.yanzhengma1.oneYzm,
          'mailCode': this.gcEmailYzm,
          's_enterprisename': this.gongsiming,
          's_blicense': this.upImg,
          's_address': this.dizhi,
          's_province': this.sheng,
          's_city': this.shi,
          's_county': this.qu,
          's_purpose': this.jyDataUrl

        }).then((data) => {
          let info = data.data.status
          if (info == 'y') {
            this.$message.success('提交成功！！！')
            this.$router.push('/applicationinfo')
          } else {
            let e = data.data.status === 'identCodeError' ? '短信验证码错误' : (data.data.status === 'mailCodeError' ? '邮箱验证码错误' : '')
            this.$message.error('提交失败：' + e)
          }
        })
      }
    },
    watch: {
      '$route' (to, from) {
        console.log('--to--', to, from)
        /* 调整跳转 */
        if (to.name === 'application' && from.query.reapply === 'true') {
          this.$router.push({name: 'application', params: {reapply: 'false'}})
        }
      }
    }

  } // 函数
</script>

<style lang="scss">
    .application {
        .el-dialog__body {
            .dev {
                 border-top: none;
                 margin-top: -100px;
                 padding: 50px;
                 width: 100%;
                box-sizing: border-box;
            }
            .w {
                width: auto;
            }
        }
        background-color: #f8f8fc;
        padding-bottom: 22px;
        border-top: 1px solid #d2d2d2;
        border-bottom: 1px solid #d2d2d2;
        .inner {
            .title {
                line-height: 80px;
                display: flex;
                flex-direction: row;
                align-items: center;
                span {
                    font-size: 24px;
                    color: #2cb7ca;
                }
                i {
                    font-size: 14px;
                    color: #999999;
                    margin-left: 15px;
                }
            }
            .container {
                padding: 0 30px 22px 30px;
                border: 1px solid #e7e7e7;
                border-top: 2px solid #2cb7ca;
                background-color: white;
                .h80 {
                    line-height: 70px;
                    input[type='text'] {
                        width: 430px;
                        line-height: 44px;
                        height: 44px;
                        border: 1px solid #d4d4d4;
                        border-radius: 4px;
                        padding-left: 20px;
                        box-sizing: border-box;
                        background-color: transparent;
                    }
                    .gongsiInput {
                        width: 710px !important;
                    }
                    .phone {
                        display: inline-block;
                        line-height: 80px;
                        font-size: 16px;
                        padding: 0 2px;
                        margin-right: 20px;
                    }
                    .xiugai {
                        display: inline-block;
                        color: #2cb7ca;
                        font-size: 14px;
                        cursor: pointer;
                        margin-right: 20px;
                    }
                    .yzm {
                        display: inline-block;
                        width: 127px;
                        height: 44px;
                        line-height: 44px;
                        font-size: 14px;
                        text-align: center;
                        background-color: #2CB7CA;
                        color: #fff;
                        border-radius: 5px;
                        cursor: pointer;
                        margin-right: 14px;
                    }
                    .inputyzm {
                        display: inline-block;
                        width: 135px !important;
                        box-sizing: border-box;
                        padding-left: 15px;
                        height: 42px;
                        line-height: 44px;
                        border: 1px solid #d4d4d4;
                        border-radius: 5px;
                    }
                    .success {
                        color: #39b010;
                        font-size: 14px;
                        margin-left: 10px;
                    }
                }
                /*营业执照*/
                .yingyezhizhao {
                    .yy {
                        float: left;
                        line-height: 10px;
                    }
                    .avatar-uploader {
                        display: inline-block;
                    }
                    .avatar-uploader .el-upload {
                        border: 1px dashed #d4d4d4;
                        border-radius: 6px;
                        cursor: pointer;
                        position: relative;
                        overflow: hidden;
                    }
                    .avatar-uploader .el-upload:hover {
                        border-color: #409EFF;
                    }
                    .avatar-uploader-icon {
                        font-size: 28px;
                        color: #8c939d;
                        width: 980px;
                        height: 672px;
                        line-height: 178px;
                        text-align: center;
                        background: url(../assets/upImg.png) center center no-repeat;
                    }
                    .avatar {
                        width: 980px;
                        height: 672px;
                        display: inline-block;
                    }
                    .el-icon-plus::before {
                        content: "";
                    }
                }
                /*城市联动*/
                .linkage {
                    .el-select {
                        width: 220px;
                        box-sizing: border-box;
                        margin-right: 10px;
                    }
                }
                .email {
                    .inputEmail {
                        width: 690px;
                        line-height: 40px;
                        height: 40px;
                        border: 1px solid #d4d4d4;
                        border-radius: 4px;
                        padding-left: 20px;
                        box-sizing: border-box;
                        background-color: transparent;
                    }
                }
                .emailYZ {
                    .yzm {
                        display: inline-block;
                        width: 127px;
                        height: 44px;
                        line-height: 44px;
                        font-size: 14px;
                        text-align: center;
                        background-color: #2CB7CA;
                        color: #fff;
                        border-radius: 5px;
                        cursor: pointer;
                        margin-right: 18px;
                    }
                    .inputyzm {
                        display: inline-block;
                        width: 180px !important;
                        box-sizing: border-box;
                        padding-left: 15px;
                        height: 42px;
                        line-height: 44px;
                        border: 1px solid #d4d4d4;
                        border-radius: 5px;
                        margin-right: 12px;
                        background-color: transparent;
                    }
                }
                .dataUrl {
                    position: relative;
                    .textar {
                        width: 980px;
                        height: 150px;
                        border-radius: 4px;
                        background-color: transparent;
                        border: 1px solid #d7d7d7;
                        font-size: 16px;
                    }
                    .titleData {
                        float: left;
                        line-height: 20px;
                    }
                    .size {
                        position: absolute;
                        bottom: 20px;
                        right: 20px;
                        font-size: 14px;
                        color: #999;
                    }
                }
                .explain {
                    display: flex;
                    p {
                        padding: 8px 0 18px 0;
                        line-height: 30px;
                        font-size: 12px;
                        margin-left: 5px;
                        color: #999999;
                        i {
                            color: #2CB7CA;
                        }
                        /*.el-checkbox__inner {*/
                        /*width: 18px;*/
                        /*height: 18px;*/
                        /*}*/
                        .bottom {
                            font-size: 14px;
                            color: #333333;
                            a {
                                font-size: 14px;
                                color: #2cb7ca;
                            }
                        }
                    }
                }
                .submit {
                    .btn {
                        width: 114px;
                        height: 46px;
                        line-height: 46px;
                        text-align: center;
                        display: inline-block;
                        border-radius: 5px;
                        background-color: #666666;
                        color: #fff;
                        font-size: 14px;
                        margin: 6px 0 8px 0;
                        cursor: pointer;
                        &.success {
                            background-color: #2CB7CA;
                        }
                    }
                }
                .pub-leftTitle {
                    text-align: right;
                    display: inline-block;
                    width: 120px;
                    line-height: 80px;
                    font-size: 16px;
                    color: #000;
                    margin-right: 22px;
                }
            }
        }
        /*滑块*/
       .hkInner{
       	position: fixed;
       	width: 100vw;
       	height: 100vh;
       	left: 0;
       	top: 0;
       	background-color: rgba(0,0,0,0.5);
       	z-index: 10000;
       	.resHK1 {
            width: auto;
            height: auto;
            margin-left: -200px;
            margin-top: -100px;
            position: absolute;
            left: 50%;
            top: 50%;
            box-sizing: border-box;
            
        }
       }
        
    }
</style>